<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./iconmoon/style.css">
    <title>Document</title>
    <style>
        .top{
           position: relative;
        }
        .top .bg{
            height: 100%;
            width: 100%;
            position: absolute;
            z-index: -1;
            background: rgba(7, 17, 27,0.5);
            filter: blur(10rem);
        }
        .top .up {
            box-sizing: border-box;
            padding: 48rem 32rem 36rem  0;
            display: flex;
        }
        .top .img-main{
            margin-left:48rem ;
            margin-right:32rem ;
            width: 128rem;
            height: 128rem;
            border-radius: 4rem;
        }
        .top .content .brand{
            font-size: 32rem;
            color:#fff;
            font-weight: bold;
            line-height: 36rem;
            margin-bottom: 16rem;
            display: flex;
        }
        .top .content .brand .brandImg{
            background:url('./img/brand@3x.png') no-repeat;
            background-size:cover;
            margin:4rem 12rem 0 0;
            width: 60rem;
            height: 38rem;
        }
        .top .content{
            position: relative;
            flex: 1;
        }
        .top .content .transport{
            font-size: 24rem;
            color:#fff;
            font-weight: 200;
            line-height: 24rem;
            margin-bottom: 20rem;
        }
        .top .content .discount{
            font-size: 20rem;
            color:#fff;
            font-weight: 200;
            line-height: 24rem;
            margin-bottom: 20rem;
            display: flex;
        }
        .top .content .discount .discountImg{
            width: 25rem;
            height: 25rem;
            background:url('./img/decrease_1@2x.png') no-repeat;
            background-size: cover;
            margin-right: 8rem;
        }
        .top .content .num{
            position: absolute;
            right: 24rem;
            bottom: 0;
            border-radius: 24rem;
            display: inline-block;
            font-size: 20rem;
            color:#fff;
            font-weight: 200;
            line-height: 24rem;
            height: 48rem;
            padding: 14rem 16rem;
            box-sizing: border-box;
            background-color: rgba(0,0,0,0.2);
        }
        .down .notice {
            display: flex;
            background-color: rgba(7, 17,27, 0.2);
            height: 56rem;
            box-sizing: content-box;
            padding: 0 24rem;
            font-size: 25rem;
            color: #fff;
            font-weight: 200;
            line-height: 56rem;
            justify-content: center;
            align-items: center;
            vertical-align: top;
        }
        .down .notice .img{
            width: 100rem;
            height: 25rem;
            background:url('./img/bulletin@2x.png') no-repeat;
            background-size: cover;
            margin-right: 8rem;
        }
        .down .notice .desc{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
         }
        .down .notice .more{
            margin-left: 8rem;
          }
        .mid{
              border-bottom: 1rem solid rgba(7,17,27,0.1);
          }
        .mid ul{
             height: 80rem;
            display: flex;
            justify-content: space-around;
            font-size: 28rem;
            color: rgb(77, 85, 93);
        }
        .mid ul .active{
            color: rgb(240, 20, 20);
        }
        .mid ul li{
            line-height: 80rem;
        }
        .bottom{
            display: flex;
        }
        .bottom .left ul{
            width: 160rem;
         }
        .bottom .left li{
            height: 108rem;
            background-color: #f3f5f7;
            padding: 0 24rem;
            box-sizing: content-box;
            font-size: 24rem;
            color: rgb(0,0,0);
            font-weight: 200;
            line-height: 28rem;
            display: flex;
            justify-content: left;
            align-items: center;
            border-bottom: 1rem solid rgba(7,17,27,0.1);
         }
        .bottom .right{
             flex: 1;
         }
        .bottom .right dl dt{
            display: flex;
            height: 52rem;
            background-color: #f3f5f7;
         }
        .bottom .right dl dt .block{
             background-color: #d9dde1;
             height: 100%;
             width: 4rem;
            
         }
        .bottom .right dl dt .desc{
            font-size: 24rem;
            margin-left: 28rem;
            color: rgb(147, 153, 159);
             height: 52rem;
             line-height: 52rem;
         }
        .bottom .right dl dd{
             display: flex;
             width: 100%;
         }
        .bottom .right dl dd .item{
            margin: 36rem;
            display: flex;
        }
        .bottom .right dl dd .item .itemImg{
            width: 100rem;
            height: 100rem;
            background-color: #f90;
        }
        .bottom .right dl dd .item .details{
            margin-left: 20rem;
        }
        .bottom .right dl dd .item .details .title{
            font-size: 28rem;
            color: rgb(7,17,27);
            line-height: 28rem;
        }
        .bottom .right dl dd .item .details .itemDesc{
            margin: 16rem 0;
            font-size: 20rem;
            color: rgb(147,153,159);
        }
        .bottom .right dl dd .item .details .sale{
            display: flex;
            font-size: 20rem;
            color: rgb(147,153,159);
        }
        .bottom .right dl dd .item .details .sale .saleNum{
            margin-right: 24rem;
        }
        .bottom .right dl dd .item .details .price{
            display: flex;
            font-size: 20rem;
            color: rgb(147,153,159);
            margin-top: 10rem;
        }
        .bottom .right dl dd .item .details .price .newPrice{
            font-size: 28rem;
            margin-right: 24rem;
            color: rgb(240,20,20);
            font-weight: 700;
        }
        .bottom .right dl dd .item .details .price .newPrice span{
             font-size: 20rem;
         }
        .bottom .right dl dd .item .details .price .oldPrice{
           text-decoration: line-through;
        }
        .all{
            display: flex;
            justify-content:space-between;
            height: 100rem;
            background-color: #141d27;
            color: rgb(255,255,255,0.4);
        }
        .all .left {
            display: flex;
        }
        .all .left .iconContainer{
            margin-left: 36rem;
            width: 100rem;
            height: 100rem;
            background-color: rgb(0,0,0,0.2);
            border-radius: 50%;
            display: flex;
            justify-content:center;
            align-items: center;
        }
        .all .left .layout-shopping_cart{
            font-size:48rem;
            color: rgb(255,255,255,0.4);
            width: 88rem;
            height: 88rem;
            text-align: center;
            line-height: 88rem;
            border-radius: 50%;
            background-color: rgb(255,255,255,0.4); 
        }
        .all .left .totalPrice{
            margin: 44rem 0 24rem 36rem;
            font-size: 32rem;
            color: rgba(255,255,255,0.4);
            font-weight: 700;
            line-height: 48rem;
            display: flex;
            align-items: center;
        }
        .all .left .totalPrice .goodPrice{
            padding-right: 24rem;
            border-right: 1px solid rgba(255,255,255,0.1);
        }
        .all .left .totalPrice .transportPrice{
              padding-left: 24rem;
        }
        .all .right{
            width: 210rem;
            font-size: 32rem;
            font-weight: 700;
            line-height: 48rem;
            height: 100%;
            display: flex;
            justify-content:center;
            align-items: center; 
            background-color:  #2b333b;
         }
    </style>
</head>
<body>
    <div class="container">
        <div class="top">
            <div class='bg'></div>
            <div class="up">
                <div class="img">
                    <img class="img-main" src="./img/111.png" alt="">
                </div>
                <div class="content">
                    <div class='brand'>
                        <span class="brandImg"></span>
                        <span>粥品香坊(大运村)</span>
                    </div>
                    <div class='transport'>
                        <p>蜂鸟专送 / 38分钟送达</p>
                    </div>
                    <div class='discount'>
                        <!-- <img src="./img/decrease_1@2x.png" alt=""> -->
                        <span class="discountImg"></span>
                        <span>在线支付满28减5,满50减10</span>
                    </div>
                    <div class='num'>
                        <span> 5个 ></span>
                    </div>
                </div>
            </div>
            <div class='down'>
                <div class='notice'>
                    <span class='img'> </span>
                    <div class='desc'>粥品因为其烹饪粥料的秘方源于中国千年古法,再融合现代制作工艺然后我就不知道怎么往下去编了 就这样吧,毁灭吧</div>
                    <div class="more"> > </div>
                </div>
            </div>
        </div>
        <div class="mid">
            <ul>
                <li class="active">商品</li>
                <li>评价</li>
                <li>商家</li>
            </ul>
        </div>
        <div class="bottom">
            <div class="left">
                <ul class=menu>
                    <li>
                        <div>热销榜</div>
                    </li>
                    <li>
                        <div>单人特色套餐</div>
                    </li>
                    <li>
                        <div>特色粥品</div>
                    </li>
                    <li>
                        <div>特色粥品</div>
                    </li>
                    <li>
                        <div>特色粥品</div>
                    </li>
                    <li>
                        <div>特色粥品</div>
                    </li>
                    <li>
                        <div>特色粥品</div>
                    </li>
                    <li>
                        <div>特色粥品</div>
                    </li>
                </ul>
            </div>
            <div class="right">
                <dl>
                    <dt>
                        <div class="block"></div>
                        <div class="desc">单人特色套餐</div>
                    </dt>
                    <dd>
                        <div class='item'>
                            <div class="itemImg"></div>
                            <div class="details">
                                <div class="title">皮蛋瘦肉粥配包子套餐</div>
                                <div class="itemDesc">咸粥</div>
                                <div class="sale">
                                    <div class='saleNum'>月售1132份</div>
                                    <div class='commend'>好评率100%</div>
                                </div>
                                <div class="price">
                                    <div class='newPrice'> <span>&yen;</span> 24 </div>
                                    <div class='oldPrice'>&yen;28 </div>
                                </div>
                            </div>
                        </div>
                    </dd>
                    <dt>
                        <div class="block"></div>
                        <div class="desc">特色粥品</div>
                    </dt>
                     <dd>
                        <div class='item'>
                            <div class="itemImg"></div>
                            <div class="details">
                                <div class="title">皮蛋瘦肉粥配包子套餐</div>
                                <div class="itemDesc">咸粥</div>
                                <div class="sale">
                                    <div class='saleNum'>月售1132份</div>
                                    <div class='commend'>好评率100%</div>
                                </div>
                                <div class="price">
                                    <div class='newPrice'> <span>&yen;</span> 24 </div>
                                    <div class='oldPrice'>&yen;28 </div>
                                </div>
                            </div>
                        </div>
                    </dd>
                     <dd>
                        <div class='item'>
                            <div class="itemImg"></div>
                            <div class="details">
                                <div class="title">皮蛋瘦肉粥配包子套餐</div>
                                <div class="itemDesc">咸粥</div>
                                <div class="sale">
                                    <div class='saleNum'>月售1132份</div>
                                    <div class='commend'>好评率100%</div>
                                </div>
                                <div class="price">
                                    <div class='newPrice'> <span>&yen;</span> 24 </div>
                                    <div class='oldPrice'>&yen;28 </div>
                                </div>
                            </div>
                        </div>
                    </dd>
                     <dd>
                        <div class='item'>
                            <div class="itemImg"></div>
                            <div class="details">
                                <div class="title">皮蛋瘦肉粥配包子套餐</div>
                                <div class="itemDesc">咸粥</div>
                                <div class="sale">
                                    <div class='saleNum'>月售1132份</div>
                                    <div class='commend'>好评率100%</div>
                                </div>
                                <div class="price">
                                    <div class='newPrice'> <span>&yen;</span> 24 </div>
                                    <div class='oldPrice'>&yen;28 </div>
                                </div>
                            </div>
                        </div>
                    </dd>
                </dl>
            </div>
        </div>
        <div class="all">
            <div class='left'>
                <div class='iconContainer'>
                    <div class="layout-shopping_cart"></div>
                </div>
                <div class='totalPrice'>
                    <div class='goodPrice'>&yen; 0</div>
                    <div class='transportPrice'>另需配送费4元</div>
                </div>
            </div>
            <div class='right'>
                <div>&yen; 20 起送</div>
            </div>
    </div>
</body>
  <script>
      function adapter(){
          const w = document.documentElement.clientWidth;
          document.documentElement.style.fontSize = w / 750 + "px";
      }
      adapter();
      window.onresize = adapter;
  </script>
</html>